<template>
   <div class="layout-padding row justify-center">

    <div style="width: 600px; max-width: 100vw;">
          <q-tabs
            inverted
            color="dark"
            v-model="belongType"
            @select="updateTopicType"
          >
            <q-tab slot="title"  label="热门" name="HOTS"/>
            <q-tab slot="title"  label="关注" name="ATTENTIONS"/>
            <q-tab slot="title"  label="收藏" name="COLLECTIONS"/>
          </q-tabs>
      </div>

    <div style="width: 600px; max-width: 100vw;">
      <topic-list-compo :belongType="belongType" ></topic-list-compo>     
    </div>
  </div>
</template>

<script>
import { QTabs, QTab } from "quasar";
import TopicListCompo from "./topic-list-compo";

export default {
  components: {
    TopicListCompo,
    QTabs,
    QTab,
  },
  data() {
    return {
      topicList: [],
      belongType: this.$route.query.belongType || 'HOTS',
    };
  },
  methods: {
     updateTopicType(obj) {
      console.log('更改主题类型',obj);
      console.log('当前类型：',this.belongType);
      // this.$router.push('/community/my-topic?belongType='+obj)
    }
  }
};
</script>
